<template>
  <div class="hot_keywords divBox">
    <el-card class="box-card">
      <template class="clearfix" v-slot:header>
        <div class="container">
          <el-form :inline="true">
            <el-form-item label="搜索：">
              <el-input v-model="hotKeywordsForm.keyword" placeholder="请输入" size="small" class="search-select" clearable>
                <template v-slot:append>
                  <el-button icon="el-icon-search" size="small" @click="onSeachHotKeywordsList" />
                </template>
              </el-input>
            </el-form-item>
          </el-form>
        </div>
        <el-button size="small" type="primary" icon="el-icon-plus" @click="hotKeywordAdd">添加关键词</el-button>
        <el-tooltip :disabled="!disabledHotKey" class="ml10" effect="dark" content="本页至少选择一项" placement="bottom">
          <div style="display: inline-block;">
            <el-button :disabled="disabledHotKey" size="small" icon="el-icon-close" type="primary" @click="batchDelHotKey">批量删除评论</el-button>
          </div>
        </el-tooltip>
      </template>
      <el-table
        v-loading="hotKeywordLoading"
        :data="hotKeywordList"
        style="width: 100%;"
        size="mini"
        class="table"
        @selection-change="handleSelectionReplyChange"
      >
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column prop="name" label="关键词" min-width="250" />
        <el-table-column prop="count" label="热度（点击量）" min-width="250" />
        <el-table-column label="操作" min-width="120" fixed="right" align="center">
          <template slot-scope="{ row, $index }">
            <el-button type="text" size="small" @click.stop="editHotKeyword(row.id)">编辑</el-button>
            <el-divider direction="vertical"></el-divider>
            <el-button type="text" size="small" @click.stop="delHotKeyword(row.id, $index)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="replyBox">
        <pagination
          v-show="pagination.total > 0"
          :total="pagination.total"
          :page.sync="pagination.page"
          :limit.sync="pagination.limit"
          :page-sizes="[10, 20, 30, 50]"
          @pagination="hotKeywordChange"
        />
      </div>
    </el-card>
  </div>
</template>

<script>
import {
  getHotKeywordsListApi,
  delHotKeywordsApi,
  batchDELHotKeyApi
} from '@/api/setting'

export default {
  name: 'Index',
  data() {
    return {
      hotKeywordLoading: false,
      disabledHotKey: true,
      // 选中的表格
      multipleSelectionHotKey: [],
      hotKeywordList: [],
      hotKeywordsForm: {
        keyword: ''
      },
      pagination: {
        page: 1,
        limit: 10,
        total: 0
      }
    }
  },
  mounted() {
    this.getHotKeywordsList()
  },
  methods: {
    /**
       * 批量删除热门关键词
       */
    batchDelHotKey() {
      if (this.multipleSelectionHotKey.length <= 0) return this.$message.info('请至少选择一项')
      const arr = []
      this.multipleSelectionHotKey.forEach((item) => arr.push(item.id))
      batchDELHotKeyApi(arr.join(',')).then(res => {
        this.$message.success('批量删除成功')
        this.$set(this.pagination, 'page', 1)
        this.getHotKeywordsList()
      })
    },
    handleSelectionReplyChange(val) {
      this.$set(this, 'multipleSelectionHotKey', val)
      this.multipleSelectionHotKey.length > 0 ? this.disabledHotKey = false : this.disabledHotKey = true
    },
    /**
       * 添加热门关键词
       */
    hotKeywordAdd() {
      this.hotKeyModel(0)
    },
    hotKeyModel(isEdit = 0, idx = 0) {
      const _this = this
      this.$modal({
        componentProps: {
          id: idx,
          isEdit: isEdit
        },
        component: (resolve) => require(['./components/editKey'], resolve),
        props: {
          title: !isEdit ? '添加热门关键词' : '编辑热门关键词',
          customClass: 'zdyDialogCls HotKeywordDialogCls',
          width: '100%'
        },
        methods: {
          getHotKeyWord() {
            _this.$set(_this.pagination, 'page', 1)
            _this.getHotKeywordsList()
          }
        }
      })
    },
    /**
       * 编辑热门关键词
       */
    editHotKeyword(idx) {
      this.hotKeyModel(1, idx)
    },
    /**
       * 删除热门关键词
       */
    delHotKeyword(guid, idx) {
      this.$set(this, 'hotKeywordLoading', true)
      delHotKeywordsApi(guid).then(res => {
        this.$message.success('删除成功')
        this.hotKeywordList.splice(idx, 1)
        this.$set(this, 'hotKeywordLoading', false)
      }).catch(() => {
        this.$set(this, 'hotKeywordLoading', false)
      })
    },
    /**
     * 获取热门关键词
     */
    getHotKeywordsList() {
      this.$set(this, 'hotKeywordLoading', true)
      getHotKeywordsListApi({
        pageNumber: this.pagination.page,
        pageSize: this.pagination.limit,
        keyword: this.hotKeywordsForm.keyword,
        orderBy: 'count desc'
      }).then(res => {
        this.$set(this, 'hotKeywordList', res.data)
        this.$set(this.pagination, 'total', res.head.totalCount)
        this.$set(this, 'hotKeywordLoading', false)
      }).catch(() => {
        this.$set(this, 'hotKeywordList', [])
        this.$set(this.pagination, 'total', 0)
        this.$set(this, 'hotKeywordLoading', false)
      })
    },
    hotKeywordChange(key) {
      this.$set(this.pagination, 'page', key.page)
      this.$set(this.pagination, 'limit', key.limit)
      this.getHotKeywordsList()
    },
    onSeachHotKeywordsList() {
      this.$set(this.pagination, 'page', 1)
      this.getHotKeywordsList()
    }
  }
}
</script>

<style scoped>

</style>

<style lang="scss">
  .el-dialog.HotKeywordDialogCls {
    max-width: 700px;
  }
</style>
